import React, { useState, Fragment } from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Message() {
	const [msg] = useState([
		{ id: '001', title: '消息1', content: '锄禾日当午' },
		{ id: '002', title: '消息2', content: '汗滴禾下土' },
		{ id: '003', title: '消息3', content: '谁知盘中餐' },
		{ id: '004', title: '消息4', content: '粒粒皆辛苦' },
	])

	return (
		<Fragment>
			<ul>
				{msg.map(m => {
					return (
						<li key={m.id}>
							{/* params传参 */}
							{/* <Link to={`detail/${m.id}/${m.title}/${m.content}`}>
								{m.title}
							</Link> */}

							{/* search传参 */}
							{/* <Link
								to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}
							> */}
							<Link
								to="detail"
								state={{ id: m.id, title: m.title, content: m.content }}
							>
								{m.title}
							</Link>
						</li>
					)
				})}
			</ul>
			<hr />

			{/* <Routes>
				<Route path="detail" element={<Detail />} />
			</Routes> */}
			<Outlet />
		</Fragment>
	)
}
